import React from "react";
import { Outlet ,NavLink} from "react-router-dom";
import { Tabbar } from 'react-vant';
import {setIcon} from "../gloabl/index"
import {mainrouter} from "../router/Router_config"


type Props = {};

const Index = (props: Props) => {
  return (
    <div>
      <div>
        <header></header>
        <main>
          <Outlet></Outlet>
        </main>
        <footer>
        
            <Tabbar>
             {
              mainrouter.map((item:any,index:any)=>{
              return  <Tabbar.Item icon={setIcon(item.icon)} key={index}>
                <NavLink to={item.path}>{item.title}</NavLink>
              </Tabbar.Item>
              })
             }
            
            </Tabbar>
          
        </footer>
      </div>
    </div>
  );
};

export default Index;
